import React, {PropsWithChildren, useEffect, useState} from 'react'
import styles from "./EditEmployeeForm.module.sass"
import {getRoles, RoleResponse} from "../apis/RoleApi";
import {SUPER_ADMIN_ROLE_NAME} from "../apis/EmployeeApi";
import {Button, Cell, Form, Input} from "@nutui/nutui-react-taro";
import SelectableListActionSheet from "./SelectableListActionSheet";

export interface EditEmployeeInitialValue {
    roleIds: number[]
    name: string
    password?: string
    phoneNumber: string
}

export interface EditEmployeeFormProps extends PropsWithChildren {
    initialValue?: EditEmployeeInitialValue
    editPassword?: boolean
    onConfirm: (values: EditEmployeeInitialValue) => Promise<void>
}


const EditEmployeeForm: React.FC<EditEmployeeFormProps> = ({initialValue, editPassword, onConfirm}) => {
    const [confirming, setConfirming] = useState(false)
    const [roles, setRoles] = useState<RoleResponse[]>([])
    useEffect(() => {
        getRoles().then(response => {
            setRoles(response.data.filter(it => it.name !== SUPER_ADMIN_ROLE_NAME))
        })
    }, []);
    const [roleIds, setRoleIds] = useState<number[]>(initialValue?.roleIds ?? [])
    const [showSelectRoleActionSheet, setShowSelectRoleActionSheet] = useState(false)
    return <>
        <Form className={styles.container}
              footer={<Button formType={"submit"} type={"primary"} loading={confirming} block>保存</Button>}
              labelPosition={"top"} initialValues={initialValue} onFinish={async (values) => {
            setConfirming(true)
            try {
                await onConfirm({...values, roleIds: roleIds,})
            } finally {
                setConfirming(false)
            }
        }}>
            <Form.Item required label={"姓名"} name={"name"}
                       rules={[{required: true, message: "请输入姓名"}]}>
                <Input placeholder={"姓名"}/>
            </Form.Item>
            <Form.Item required label={"手机号码"} name={"phoneNumber"}
                       rules={[{required: true, message: "请输入你的手机号"}]}>
                <Input placeholder={"手机号码"} type={"number"}/>
            </Form.Item>
            {!!editPassword && <Form.Item label={"密码"} name={"password"}>
                <Input placeholder={"密码"} type={"number"}/>
            </Form.Item>}
            <Form.Item label={"角色"} name={"roleId"}>
                <Cell title={roles.filter(it => roleIds.includes(it.id)).map(it => it.name).join("，") || "选择角色"}
                      onClick={() => {
                          setShowSelectRoleActionSheet(true)
                      }}/>
            </Form.Item>
        </Form>
        <SelectableListActionSheet visible={showSelectRoleActionSheet} onCancel={() => {
            setShowSelectRoleActionSheet(false)
        }} value={roleIds?.map(it => it.toString()) ?? []} onChange={(v) => {
            setRoleIds(v.map(it => Number(it)))
        }} options={roles.map(it => ({key: it.id, label: it.name}))}/>
    </>
}

export default EditEmployeeForm


